// Name:                     Animation
//
// Description:              Useful CSS3 animations
//
// Component:                `.am-animation-*`
//
// Modifiers:                `.am-animation-fade`
//                           `.am-animation-scale-up`
//                           `.am-animation-scale-down`
//                           `.am-animation-slide-top`
//                           `.am-animation-slide-bottom`
//                           `.am-animation-slide-left`
//                           `.am-animation-slide-right`
//                           `.am-animation-slide-shake`
//                           `.am-animation-reverse`
//                           `.am-animation-delay-*`
//
// Used by:                   Dropdown
//
// =============================================================================

/* ==========================================================================
   Component: Aniamtion
 ============================================================================ */

[class*="am-animation-"] {
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}


/* Hide animated element if scrollSpy is used */

@media screen {
    .cssanimations [data-am-scrollspy*="animation"] {
        opacity: 0;
    }
}


/* Fade */

.@{ns}animation-fade {
    animation-name: am-fade;
    animation-duration: 0.8s;
    animation-timing-function: linear;
}


/* Scale */

.@{ns}animation-scale-up {
    animation-name: am-scale-up;
}

.@{ns}animation-scale-down {
    animation-name: am-scale-down;
}


/* Slide */

.@{ns}animation-slide-top {
    animation-name: am-slide-top;
}

.@{ns}animation-slide-bottom {
    animation-name: am-slide-bottom;
}

.@{ns}animation-slide-left {
    animation-name: am-slide-left;
}

.@{ns}animation-slide-right {
    animation-name: am-slide-right;
}

.@{ns}animation-slide-top-fixed {
    animation-name: am-slide-top-fixed;
}


/* Shake */

.@{ns}animation-shake {
    animation-name: am-shake;
}


/* Spin */

.@{ns}animation-spin {
    animation: am-spin 2s infinite linear;
}


/* Spring */

.@{ns}animation-left-spring {
    animation: am-left-spring .3s ease-in-out;
}

.@{ns}animation-right-spring {
    animation: am-right-spring .3s ease-in-out;
}

// Modifiers
// =============================================================================
.@{ns}animation-reverse {
    animation-direction: reverse;
}

.@{ns}animation-paused {
    animation-play-state: paused !important;
}

.variant-animation-delay(@delay: 5) {
    .@{ns}animation-delay-@{delay} {
        animation-delay:~"@{delay}s";
    }
}

.variant-animation-delay(1);
.variant-animation-delay(2);
.variant-animation-delay(3);
.variant-animation-delay(4);
.variant-animation-delay(5);
.variant-animation-delay(6);

/* Keyframes
 ============================================================================ */


/* Fade */

@keyframes am-fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* Scale up */

@keyframes am-scale-up {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Scale down */

@keyframes am-scale-down {
    0% {
        opacity: 0;
        transform: scale(1.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Slide top */

@keyframes am-slide-top {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Slide bottom */

@keyframes am-slide-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Slide left */

@keyframes am-slide-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Slide right */

@keyframes am-slide-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Shake */

@keyframes am-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(-9px);
    }
    20% {
        transform: translateX(8px);
    }
    30% {
        transform: translateX(-7px);
    }
    40% {
        transform: translateX(6px);
    }
    50% {
        transform: translateX(-5px);
    }
    60% {
        transform: translateX(4px);
    }
    70% {
        transform: translateX(-3px);
    }
    80% {
        transform: translateX(2px);
    }
    90% {
        transform: translateX(-1px);
    }
}


/* Slide top fixed */

@keyframes am-slide-top-fixed {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Slide bottom fixed */

@keyframes am-slide-bottom-fixed {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Spin */

@keyframes am-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}


/* Spring */

@keyframes am-right-spring {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-20%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes am-left-spring {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(20%);
    }
    100% {
        transform: translateX(0);
    }
}
